<template>
	<div id="map" class="map"></div>
</template>

<script>
	import L from 'leaflet';
	import 'leaflet/dist/leaflet.css';
	import {
		mapGetters
	} from 'vuex'
	export default {
		name: 'MapComponent',
		computed: {
			...mapGetters(['hostApi', "userInfo"])
		},
		data() {
			return {
				map: null,
				bounds: [
					[0, 0],
					[10, 10]
				], // 示例边界，根据实际图片尺寸调整
				minZoom: 2,
				maxZoom: 10,
				initialZoom: 2,
				imageBounds: [
					[0, 0],
					[10, 10]
				], // 图片的实际边界
				imageWidth: 0,
				imageHeight: 0,
				info: "",
			};
		},
		mounted() {

			this.info = uni.getStorageSync("campusInfo");
			console.log(this.info)
			this.loadImage();
			window.addEventListener('resize', this.handleResize);
		},
		beforeDestroy() {
			window.removeEventListener('resize', this.handleResize);
		},
		methods: {
			loadImage() {
				const img = new Image();
				img.src = this.hostApi + this.info.mapImg
				// img.src =
				// 	'https://ts1.tc.mm.bing.net/th/id/R-C.fabbf6d09697e1b6f8f06cad0ffda0c2?rik=JDrmJHt7L4cwkQ&riu=http%3a%2f%2fimg.soufunimg.com%2fnews%2f2017_09%2f05%2fhome%2f1504605961049_000.jpg&ehk=0xg8XQZTSrawKpdsrnnMe%2fMh%2b02Ji5JKqN3wNMrfn9o%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1';
				img.onload = () => {
					this.imageWidth = img.width;
					this.imageHeight = img.height;
					console.log(img.width, img.height)
					this.initMap();
				};
			},
			initMap() {
				this.calculateBoundsAndZoomLevels();
				this.map = L.map('map', {
					minZoom: this.minZoom,
					maxZoom: this.maxZoom,
					maxBounds: this.bounds,
					maxBoundsViscosity: 1.0,
					attributionControl: false
				}).setView([this.bounds[0][0] + (this.bounds[1][0] - this.bounds[0][0]) / 2, this.bounds[0][1] + (this
					.bounds[1][1] - this.bounds[0][1]) / 2], this.initialZoom);

				// 添加图片作为底图
				// L.imageOverlay(
				// 	'https://ts1.tc.mm.bing.net/th/id/R-C.fabbf6d09697e1b6f8f06cad0ffda0c2?rik=JDrmJHt7L4cwkQ&riu=http%3a%2f%2fimg.soufunimg.com%2fnews%2f2017_09%2f05%2fhome%2f1504605961049_000.jpg&ehk=0xg8XQZTSrawKpdsrnnMe%2fMh%2b02Ji5JKqN3wNMrfn9o%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1',
				// 	this.imageBounds
				// ).addTo(this.map);
				L.imageOverlay(
					this.hostApi + this.info.mapImg,
					this.imageBounds
				).addTo(this.map);
			},
			calculateBoundsAndZoomLevels() {
				const width = window.innerWidth;
				const height = window.innerHeight;
				const aspectRatio = width / height;

				// 图片的实际尺寸
				const imageWidth = this.imageWidth;
				const imageHeight = this.imageHeight;

				console.log(imageHeight, imageWidth)

				// 根据图片的实际尺寸设置边界
				this.bounds = [
					[0, 0],
					[imageHeight * 0.2, imageWidth * 0.2]
				];
				this.imageBounds = [
					[0, 0],
					[imageHeight * 0.2, imageWidth * 0.2]
				];

				// 计算初始缩放级别
				if (aspectRatio > 1) {
					// 宽屏
					this.initialZoom = 2; // 最小缩放级别
				} else {
					// 竖屏或正方形
					this.initialZoom = 2; // 最小缩放级别
				}

				// 设置最小和最大缩放级别
				this.minZoom = 2;
				this.maxZoom = 10;
			},
			handleResize() {
				this.calculateBoundsAndZoomLevels();
				if (this.map) {
					this.map.setMaxBounds(this.bounds);
					this.map.setMinZoom(this.minZoom);
					this.map.setMaxZoom(this.maxZoom);
					this.map.setView([this.bounds[0][0] + (this.bounds[1][0] - this.bounds[0][0]) / 2, this.bounds[0][1] +
						(this.bounds[1][1] - this.bounds[0][1]) / 2
					], this.initialZoom);
				}
			}
		}
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	.map {
		height: 100vh;
		/* 使地图高度填满整个视口 */
		width: 100vw;
		/* 使地图宽度填满整个视口 */
	}
</style>